<template>
  <ul class="tabs flex justify-between align-center">
    <li
      v-for="(item, key) in tabs"
      :key="key"
      class="flex-1"
      :class="{ active: item.id === currentTab.id }"
      @click="selectTab(item)"
    >
      <div class="flex justify-center">
        <div class="image-container flex-s flex relative">
          <img :src="item.currentIcon" width="24" />
          <div v-if="item.tips && !item.unread" class="new-msg-tips"></div>
          <div v-if="item.unread" class="unread-msg-tips">
            <span> {{ item.unread > 99 ? '99+' : item.unread }}</span>
          </div>
        </div>
      </div>
      <div class="text-10">
        {{ item.title }}
      </div>
    </li>
  </ul>
</template>

<script setup lang="ts">
  import { tabs, currentTab } from './tabs';
  import { ITabs } from './types';

  const selectTab = (item: ITabs) => {
    tabs.value.forEach((e) => {
      e.currentIcon = e.icon;
    });
    currentTab.value = item;
    currentTab.value.currentIcon = item.activeIcon;
  };
</script>

<style lang="scss" scoped>
  .tabs {
    height: 32px;
    padding: 0 16px;
    background-color: var(--tab-background-color);
    height: 52px;
    .unread-msg-tips {
      position: absolute;
      width: 16px;
      height: 16px;
      background-color: var(--red);
      line-height: 20px;
      color: var(--white);
      border-radius: 50%;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        zoom: 0.7;
      }
      right: -8px;
      top: 2px;
    }
    li {
      text-align: center;

      img {
        filter: grayscale(100%);
      }
    }
    li.active {
      color: var(--primary);
      img {
        filter: grayscale(0);
      }
    }
    .new-msg-tips {
      border-radius: 50%;
      width: 8px;
      height: 8px;
      background-color: var(--red);
      position: absolute;
      right: -4px;
      top: 2px;
    }
    .image-container {
      width: 28px;
      height: 28px;
    }
  }
</style>
